<template>
  <el class="drag-item">
    <span class="move-icon">
      <i class="icon-tabler:arrows-move"></i>
    </span>
    <slot />
    <div class="drag-item-tools">
      <i class="icon-material-symbols:content-copy"></i>
      <i class="icon-material-symbols:delete-rounded"></i>
      <i class="icon-material-symbols:add-box"></i>
    </div>
  </el>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.drag-item {
  @apply relative bd pt-2 px-2 rounded hover:op90;
  @apply transition duration-200;
  &:hover {
    border-color: var(--primary-color);
  }
  &::after {
    content: '';
    @apply absolute inset-0 bg-transparent z-10 cursor-pointer;
  }
  &-tools {
    @apply absolute right-0 bottom-0 bg-black/3 py-0.7 px-2 z-15;
    @apply flex gap-1;

    i {
      @apply cursor-pointer text-lg text-black/30 active:op60;
      &:hover {
        color: var(--primary-color);
      }
    }
  }
  .move-icon {
    @apply absolute top-0 right-0 text-lg text-black/70 bg-black/5 rounded-tr-3px z-50;
    @apply h-7 w-7 text-center leading-8 cursor-move! hover:text-white;
    &:hover {
      background-color: var(--primary-color);
    }
  }
}
</style>
